import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import ClassNames from 'classnames';
import { Step,Row,Col,Button,Message,Form,FormGroup,Label,FormControl,Modal } from 'tinper-bee';
import BusinessContact from './BusinessContact.jsx';
import CommonModal from './../../components/CommonModal/index.jsx'
import App from 'layout/App.js'
import './index.less';
import { vendorsDanger as danger, vendorsSuccess as success } from 'utils/config.js';
import { searchWorkType, addWorkType, deleteWorkType, editWorkType }  from './worktype.config.js'
import ReactCSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
import 'nprogress/nprogress.css';
import NProgress from 'nprogress';

export default class WorkType extends Component{
  constructor(props){
    super(props);
    this.state = {
      items : [],
      isAdd : true,
      text : "",
      deleteId : 0,
      showDelete : false,
      showDeleteModal: false
    }
  }
  componentDidMount(){
    NProgress.start();
    setTimeout(()=>{NProgress.done()},1000);
    window.addEventListener('scroll',this.handlerScroll)
    this.init();
  }
  init = () => {
    let _me = this;
    searchWorkType({'isAjax': 1,'ieStamp': new Date().getTime()})
    .then(function(response) {
      if (response.data.resultCode != 'busi_ex') {
        let data = response.data.result;
        console.log(data,"初始化结果");
        if (!data.length) {
        } else {
          _me.setState({
            items : data
          });
        }
      } else {
        danger({'text': response.data.exMsg});
      }
    });
  }
  add = (obj, success, faile) => {
    let _me = this;
    if(obj.text.trim().length === 0){
        danger({'text': '请输入具体内容！'});
        return;
    } else {
        if(obj.text.length > 50){
        danger({'text': '请限制在50个字符之内！'});
        return;
      }
    }
    addWorkType({'contype_name': obj.text.trim(), 'isAjax': 1})
    .then(function(res){
      let data = res.data;
      if (res.data.resultCode != 'busi_ex') {
        let data = res.data.result;
        _me.setState({
          items: [..._me.state.items, data]
        });
        success && success();
      } else {
        danger({'text': res.data.exMsg});
        faile && faile()
      };
    })
  }
  handlerAdd = (e) => {
    this.setState({
      isAdd : true
    });
  }
  handlerText = (e) => {
  }
  handlerSave = (obj, data) => {
    let _me = this;
    _me.state.items.forEach(function(item, index){
      if(item.contype_name === obj.default){
        _me.state.items.splice(index, 1, data)
      }
    })
    _me.setState({
      items: _me.state.items
    });
  }
  handlerInputClick = (e) => {
  }
  handlerAddText = (e) => {
    this.setState({
      text : e.target.value
    });
  }
  handlerAddSave = (obj, success, faile) => {
    this.add(obj, success, faile);
  }
  handlerAddCancel = (e) => {
    this.setState({
      isAdd: false,
      text : ""
    });
  }
  handlerDelete = (obj) => {
    this.setState({
      showDeleteModal : true,
      deleteId : obj.id,
      changeFlag: obj.changeFlag
    });
  }
  handlerDeleteClose = (e) => {
    this.setState({
      showDeleteModal : false
    });
  }
  handlerDeleteConfirm = (e) => {
    let _me = this;
    let param = {
      'pk_contacttype': this.state.deleteId,
      'changeFlag': this.state.changeFlag,
      'isAjax': 1
    };
    deleteWorkType(param)
    .then(function(res){
      if (res.data.resultCode != 'busi_ex') {
        let data = res.data.result;
        _me.state.items.forEach(function(item, index) {
          if (item.pk_contacttype == _me.state.deleteId) {
            _me.state.items.splice(index, 1)
          }
        });
        if (_me.state.items.length == 0) {
          _me.setState({
            isAdd: true,
            items: _me.state.items,
            showDeleteModal : false
          });
        } else {
          _me.setState({
            items: _me.state.items,
            showDeleteModal : false
          });
        }
        success({'text': '成功删除！'})
      } else {
        danger({ 'text': res.data.exMsg });
        _me.setState({
          showDeleteModal : false
        });
      }
    })
  }
  handlerKeyDown = (e, success, faile) => {
    if (e.keyCode == '13') {
      this.add({'text': this.state.text}, success, faile);
    }
  }
  handlerScroll = (e) => {
    if (e.target.scrollingElement.scrollTop >= 10) {
      this.refs.fixedTop.className = 'header header--fixed-top';
      this.refs.contenBox.className = 'content content--margin-top';
    } else {
      this.refs.fixedTop.className = 'header';
      this.refs.contenBox.className = 'content';
    }
  }
  render(){
    return (
      <App onscroll={this.handlerScroll}>
      <div className="block__type">
           <CommonModal show={this.state.showDeleteModal}
                        cancel={this.handlerDeleteClose}
                        confirm={this.handlerDeleteConfirm}
                        content={''}
                        backdrop={true}
                        >
           </CommonModal>
      <div className="header" ref="fixedTop">联系类型</div>
      <div className="content" ref="contenBox">
          <div>
            <ReactCSSTransitionGroup
              className="animateExample"
              transitionEnterTimeout={300}
              transitionLeaveTimeout={200}
              transitionName="example">
              {
                this.state.items.map((item)=>{
                  return <BusinessContact
                            action={"view"}
                            onSave={this.handlerSave}
                            onChange={this.handlerText}
                            onDelete={this.handlerDelete}
                            defaultValue={item.contype_name}
                            changeFlag={item.changeFlag}
                            key={item.pk_contacttype}
                            id={item.pk_contacttype}
                            pk_group={item.pk_group} />
                })
              }
            </ReactCSSTransitionGroup>
          </div>
          <div className="content__opeate">
              {
                this.state.isAdd && <BusinessContact
                                action={"add"}
                                onSave={this.handlerAddSave}
                                onCancel={this.handlerAddCancel}
                                onKeyDown={this.handlerKeyDown}
                                defaultValue={''}
                                id={0}
                                onChange={this.handlerAddText}
                                 />
              }
            <div onClick={this.handlerAdd} className="opeate__btn">+</div>
          </div>
        </div>
    </div>
    </App>)
  }
}

WorkType.contextTypes = {
  router : PropTypes.object
}
